<template>
    <div class="kepu">
        <!-- 设置与底部选择卡的距离 -->
        <div class="my_marg_57">
        <!-- 标题头 -->
        <mt-header title="疫苗科普" class="mt-header">
            <mt-button slot="right" @click="sousuo">
                <img src="../assets/souye/sousuo.png"
                 width="16" height="16"
                 style="margin-top:7px; margin-right:10px">
            </mt-button>
        </mt-header>

        <!-- 搜索栏与图标 -->
        <van-search
        v-show="s"
        shape="round"
        label="文章"
        placeholder="请输入搜索关键词"
        maxlength=20
        autofocus
        clearable>
        </van-search>

        <!-- 轮播图 -->
        <mt-swipe :auto="4000" class="mt-swipe" 
        :style="{height:h}">
            <mt-swipe-item>
                <img src="../assets/kepu/lunbotu/lunbo_01.jpg">
            </mt-swipe-item>
            <mt-swipe-item>
                <img src="../assets/kepu/lunbotu/lunbo_02.jpg">
            </mt-swipe-item>
            <mt-swipe-item>
                <img src="../assets/kepu/lunbotu/lunbo_03.jpg">
            </mt-swipe-item>
            <mt-swipe-item>
                <img src="../assets/kepu/lunbotu/lunbo_04.jpg">
            </mt-swipe-item>
        </mt-swipe>

        <!-- 图标 -->
            <ul class="tubiao d-flex justify-content-around mt-3 mb-0">
                <li v-for="i of tubiao" :key="i.id">
                    <router-link to="/">
                        <img :src="require(`../assets/kepu/${i.m_img}`)">
                        <p style="color:black;">{{i.m_title}}</p>
                    </router-link>
                </li>
            </ul>

        <!-- 精选专题 -->
        <!-- 标题 -->
        <div class="my_jingxvan_top">
            <span class="my_jingxvan_text_01">精选专题</span>
            <span class="my_jingxvan_text_02">查看更多 >
            </span>
        </div>
        <!-- 专题 -->
        <nut-scroller>
            <div slot="list" class="nut-hor-list-item" v-for="i of zhuanti" :key="i.id"
            :style="{width:w}">
                <router-link to="/">
                <dl class="nut-scroller-item-info ">
                    <div class="my_py_2" :style="`background-color: ${i.yanse};`">
                        <div class="my_pl_3">
                            <img src="../assets/kepu/yanjing.png" width="20px" height="20px">
                            {{i.guankan}}
                        </div>
                        <div class="my_title_h5">
                            {{i.biaoti}}
                        </div>
                        <div class="my_image">
                            <img :src="require(`../assets/kepu/huadong/${i.tupian}`)" width="35px" height="35px">
                        </div>
                    </div>
                    <div class="my_text_center">{{i.xiaobiao}}</div>
                </dl>
                </router-link>
            </div>
        </nut-scroller>

        <!-- 趣味视频 -->
        <!-- 标题 -->
        <div class="my_jingxvan_top">
            <span class="my_jingxvan_text_01">趣味视频</span>
            <span class="my_jingxvan_text_02">查看更多 >
            </span>
        </div>
        <router-link to="/">
            <!-- 内容1 -->
            <div class="my_video_top">
                <!-- 视频封面 -->
                <div class="my_video_image">
                    <img src="../assets/kepu/lunbotu/video_01.jpg">
                </div>
                <!-- 内容 -->
                <div class="my_video_sapn">
                    <p class="my_video_p01">
                        疼疼疼！打疫苗为啥这么疼？
                    </p>
                    <p class="my_video_sapn02">
                        10.3w 人已观看
                    </p>
                </div>
            </div>
        </router-link>
        <!-- 内容2 -->
        <router-link to="/">
            <div class="my_video_top2">
                <!-- 视频封面 -->
                <div class="my_video_image">
                    <img src="../assets/kepu/lunbotu/video_02.jpg">
                </div>
                <!-- 内容 -->
                <div class="my_video_sapn">
                    <p class="my_video_p01">
                        转发沾好运！九折快上岸！冲！
                    </p>
                    <p class="my_video_sapn02">
                        10.5w 人已观看
                    </p>
                </div>
            </div>
        </router-link>

        <!-- 背景图片 -->
        <div class="my_beijing">
        <!-- 大家都在看 标题 -->
        <div class="my_jingxvan_top">
            <span class="my_jingxvan_text_01">
                健康科普
            </span>
            <span class="my_jingxvan_text_02">查看更多 >
            </span>
        </div>
        <!-- 内容 -->
        <div class="my-3
         my_border_neirong"
         v-for="i of wenzhang" :key="i.id">
         <router-link :to="`/article?id=${i.id}`">
           <div class="m-3 d-flex
           align-items-center">
            <!-- 图片 -->
            <div class="my_imag">
                <img :src="require(`../assets/kepu/wenzhang/${i.tupian}`)">
            </div>
            <!-- 内容 -->
            <div class="ml-3">
                <div class="my_biaoti">{{i.biaoti}}</div>
                <div class="my_shijian">{{i.shijian}}</div>
                <div class="small my_yanse">点击查看更多精彩内容</div>
            </div>
           </div>
        </router-link>
        </div>

        </div>

        <!-- 回到顶部 -->
        <nut-backtop
        :distance="150"
        :duration="1000"
        :bottom="57"
        >
        <img src="../assets/souye/top.png" style="width:33px;height:33px;">
        </nut-backtop>

        <!-- 底部选择卡 -->
           <van-tabbar
           v-model="active"
           class="my_van_tabbar"
           active-color="#4fc08d" 
           inactive-color="#000"
           route>
                <van-tabbar-item to="/" icon="wap-home-o">首页</van-tabbar-item>
                <van-tabbar-item to="/yuyue" icon="location-o">预约</van-tabbar-item>
                <van-tabbar-item to="/kepu" icon="newspaper-o">科普</van-tabbar-item>
                <van-tabbar-item to="/me" icon="user-circle-o">我的</van-tabbar-item>
            </van-tabbar>

        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            tubiao:[],
            zhuanti:[],
            wenzhang:[],
            active:1,
            h:"187",
            w:"110px",
            s:false,
            arr:5
        }
    },
    methods:{
        back(){
            this.$router.push("/")
        },
        sousuo(){
            if(this.s==false){
               this.s=true
            }else{
               this.s=false 
            }
        }
    },
    mounted(){
        //初始化适配轮播图的高度
        let picwidth=600;
        let picheight=300;
        //屏幕的宽度
        let screenwidth=window.screen.width
        //计算对应宽度的高度
        let height=((picheight*screenwidth)/picwidth)+"px"
        //把当前计算到的高度，赋值给h
        this.h=height

        // 
        if(screenwidth>=768){
            this.w="200px"
        }else if(screenwidth>=667){
            this.w="160px"
        }else if(screenwidth>=1024){
            this.w="220px"
        }

        //图标与相关信息
        //获取图标与相关信息
        this.axios.get("/tubiao",
            {
                params:{tb_id:3}
            }).then(result=>{
            //console.log(result.data.results)
            this.tubiao=result.data.results
        })
        //精选专题
        this.axios.get("/zhuanti").then(result=>{
            //console.log(result.data.results)
            this.zhuanti=result.data.results
        })
        //文章
        this.axios.get("/wenzhang").then(result=>{
            //console.log(result.data.results)
            this.wenzhang=result.data.results
        })
    }
}
</script>

<style>
/* 大家都在看背景图片 */
.kepu .my_beijing{
    background-image: url(../assets/kepu/bj.jpg);
}

/* 标题颜色 */
.kepu .mt-header{
    background-color: #4fc08d;
}

/* 设置与底部选择卡的距离 */
.kepu .my_marg_57{margin-bottom: 57px;}

.kepu .my_ml_3{margin-left: 10px;}
/* 轮播图 */
.kepu .mt-swipe img{ 
    width: 100%;
}

/* 图标 */
.kepu .tubiao img{
    width: 30px;
    height: 30px;
}
.kepu .tubiao{
    text-align: center;
    margin-top: 10px;
    /* color: red; */
}
.kepu .tubiao p{
    margin-top: 5px;
    font-size: small;
}

/* 精选专题 */
/* 标题 */
.kepu .my_jingxvan_top{
    margin-left: 10px;display: flex;align-items: center;
    justify-content: space-between;
}
/* 设置字体 */
.kepu .my_jingxvan_text_01{
    font-size: 17px;font-weight: bolder;
}
.kepu .my_jingxvan_text_02{
    color: darkgray;font-size: 13px;
    margin-right: 10px;
}
/* 内容设置 */
.kepu .my_image{
    display: flex;
    flex-direction: row-reverse;
    padding-right: 10px;
    padding-bottom: 10px;
}
.kepu .my_py_2{
    padding-top: 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: bolder;
    color: white;
}
.kepu .my_pl_3{padding-left: 12px;}
.kepu .my_title_h5{
    padding-top: 4px;padding-left: 12px;
    color: white;
    font-weight: bolder;font-size: 15px;
}
.kepu .nut-hor-list-item{
    margin-left: 10px;margin-top: 12px;
    /* width: 110px; */
}
.kepu .nut-scroller-item-info{
    /* width: 300px; */
    border-radius: 5px;
}
.kepu .my_text_center{
    text-align: center;font-size: 10px;
    font-weight: bolder;color:black;
}

/* 趣味视频 */
.kepu .my_video_top{
    display: flex;margin-left: 10px;
    margin-right: 10px;
    align-items: center;
}
.kepu .my_video_top2{
    display: flex;margin-left: 10px;
    margin-right: 10px;margin-bottom: 18px;
    align-items: center;
}
.kepu .my_video_image{margin-top: 16px;}
/* 图片设置 */
.kepu .my_video_image img{
    width: 140px;height: 90px;
    border-radius: 5px;
}
/* 字体设置 */
.kepu .my_video_sapn{
    margin-left: 10px;
}
.kepu .my_video_p01{
    font-weight: bolder;font-size: 13px;
    margin-bottom: 0px;margin-top: 10px;
    color: black;
}
.kepu .my_video_sapn02{
    font-weight: bolder;font-size: 12px;
    color: darkgray;margin-top: 40px;
    margin-bottom: 0px;
}

/* 健康科普 */
/* 设置文章图片大小 */
.kepu .my_imag img {
  width: 130px;
  height: 85px;
  border-radius: 5px;
}
/* 外broder设置圆角 */
.kepu .my_border_neirong{
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 10px;
    border: 1px solid #e6e6e6;
    box-shadow:0 0 12px #8484;
    background-color: white;
}
/* 文章标题 */
.kepu .my_title_top{
    font-weight: bolder;font-size: 17px;
}
/* 文章内容标题 */
.kepu .my_biaoti{
  font-size: 16px;
  font-weight: bold;color:black
}
/* 文章内容时间 */
.kepu .my_shijian{
    font-size: 15px;color:black
}
/* 文章内容文字颜色 */
.kepu .my_yanse{
    color: #999;
}
</style>

